<!-- 头部 -->
<template>
  <div id="dust-header">
    <div class="center-left">
      <div class="display-flex ai-center">
        <el-button class="ml-20" type="text" @click="$router.push({ path: '/screen/iot' })"><img style="width:25px" src="@/assets/images/antiknock/back.png" alt="" srcset=""></el-button>
      </div>
    </div>
    <div class="center-title">{{queryName}}可视化大屏</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import fs from '@/assets/images/iot/full-screen.png'
import efs from '@/assets/images/iot/exit-full-screen.png'
import screenfull from 'screenfull'
export default {
  name: 'DisplayHeader',
  components: {
  },
  data () {
    return {
      fs,
      efs,
      time: this.$moment().format('YYYY/MM/DD HH:mm:ss'),
      fullscreen: true
    }
  },
  computed: {
    ...mapState({
      username: state => state.userInfo.name || ''
    }),
    day () {
      const day = Number(this.$moment(this.time).format('e'))
      switch (day) {
        case 0:
          return '星期一'
        case 1:
          return '星期二'
        case 2:
          return '星期三'
        case 3:
          return '星期四'
        case 4:
          return '星期五'
        case 5:
          return '星期六'
        case 6:
          return '星期日'
        default:
          return '星期'
      }
    },
    queryName () {
      return this.$route.query.name
    }
  },
  async mounted () {
    try {
      this.timer = setInterval(() => {
        this.time = this.$moment().format('YYYY/MM/DD HH:mm:ss')
      }, 1000)
      const element = document.documentElement;// 设置后就是我们平时的整个页面全屏效果
      if (document.webkitIsFullScreen && element.requestFullscreen()) {
        const res = await element.requestFullscreen();
        console.log('res', res)
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    } catch (err) {
      console.log('err', err)
    }
  },
  methods: {
    /**
     * 退出登录
     */
    loginOut () {
      this.$confirm('你确认要退出登录吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location.href = '/auth_login'
        setTimeout(() => {
          this.$store.dispatch('SetCachedViews', this.cachedViews.filter(item => item === 'Home')).then(() => {
            this.$store.commit('SET_USER_INFO', {})
            this.$store.commit('SET_TOKEN', '')
            this.$cookies.remove('token')
          })
        }, 500)
      }).catch(() => {
      });
    },

    //
    onFullScreen () {
      if (!screenfull.isEnabled) {
        this.$message.warning('您的浏览器不支持全屏，请更换浏览器再试~')
        return false
      }
      screenfull.toggle()
      screenfull.onchange(() => {
        this.fullscreen = screenfull.isFullscreen
      })
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
#dust-header{
  position: relative;
  width: 100%;
  height: 80px;
  line-height: 70px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: url('~@/assets/images/dust/top_bg.png') no-repeat center;
  /* background-position: left top, right bottom, left top; */
  /* background-repeat: no-repeat, no-repeat, repeat-x; */
  background-size: contain;
  .center-left{
    height: 80px;
    line-height: 50px;
    position: absolute;
    left: 5%;
    // top: 5px;
    // border: 1px solid red;
  }
  .center-title {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    font-size: 35px;
    font-weight: bold;
    background-image: linear-gradient(to top,#48A4E5, #D2FFFE );
    -webkit-background-clip: text;
    color: transparent;
  }
  .center-right{
    height: 80px;
    margin-top: 15px;
    position: absolute;
    right: 5%;
    // top: 5px;
  }
}
</style>
